App.require(["strTool"], function (strTool) {
    var app = App.getCurrent();
    app.defineComponent("str-date", {
        getDomObj: function () {
            this.attachDom("#date", "input")
                .attachDiyEvent("datepickersure", this.sureHandler)
                .attachDiyEvent("datetimepickersure", this.timeSureHandler)
                .attachDiyEvent("datetimepickerclear", this.clearHandler)
                .attachDiyEvent("datepickercancel", this.closeHandler)
                .attachDiyEvent("datetimepickercancel", this.closeHandler)
                .attachDiyEvent("datepickerclear", this.clearHandler)
                .attachDiyEvent("datepickhiddenfromoutenv", this.closeHandler)
                .attachEvent("input", "textfocus", this.textFocusHandler, false);
            
        },
        timeSureHandler: function (ev) {
            var component = this.domList.input,
                date = ev.date, time = ev.time;
            var oldValue = component.value;
            var newValue = [
                date.year,
                strTool.wrap(date.month, "0", 2),
                strTool.wrap(date.day, "0", 2)
            ].join("-") + " " + [
                strTool.wrap(time.hour, "0", 2),
                strTool.wrap(time.minute, "0", 2)
            ].join(":");
            component.value = newValue;
            this.property.value = newValue;
            if (oldValue !== newValue) {
                this.dispatchCustomEvent("datechange", {
                    component: this
                });
            }
        },
        closeHandler: function (ev) {
            this.domList.input.removeEdit(null, true);
        },
        sureHandler: function (ev) {
            var component = this.domList.input,
                date = ev.date;
            var oldValue = component.value;
            var newValue = [
                date.year,
                strTool.wrap(date.month, "0", 2),
                strTool.wrap(date.day, "0", 2)
            ].join("-");
            component.value = newValue;
            this.property.value = newValue;
            if (oldValue !== newValue) {
                this.dispatchCustomEvent("datechange", {
                    component: this
                });
            }
        },
        clearHandler: function () {
            if (this.domList.input.value !== "") {
                this.dispatchCustomEvent("dateclear", {
                    component: this
                });
            }
            this.domList.input.value = "";
            this.closeHandler();
        },
        showDatePopup: function (value) {
            var year, month, day, min, max;
            if (value) {
                var matches = /(\d+)-(\d+)-(\d+)/.exec(value);
                if (matches) {
                    year = parseInt(matches[1]);
                    month = parseInt(matches[2]);
                    day = parseInt(matches[3]);
                } else {
                    var now = new Date();
                    year = now.getFullYear();
                    month = now.getMonth() + 1;
                    day = now.getDate();
                }
            } else {
                var now = new Date();
                year = now.getFullYear();
                month = now.getMonth() + 1;
                day = now.getDate();
            }

            if (this.property.min) {
                var matches = /(\d+)-(\d+)-(\d+)/.exec(this.property.min);
                if (matches) {
                    min = {
                        year: parseInt(matches[1]),
                        month: parseInt(matches[2]),
                        day: parseInt(matches[3])
                    }
                }
            }
            if (this.property.max) {
                var matches = /(\d+)-(\d+)-(\d+)/.exec(this.property.max);
                if (matches) {
                    max = {
                        year: parseInt(matches[1]),
                        month: parseInt(matches[2]),
                        day: parseInt(matches[3])
                    }
                }
            }
            var page = this._getPage();
            this.domList.input.blur();
            if (window.innerWidth < 800) {
                page.showPopUp("strdatePicker", {
                    target: this,
                    title: "选择日期",
                    year: year,
                    month: month,
                    day: day,
                    min: min,
                    max: max
                })
            }
            else {
                if (page.popUp) return;
                page.showPopUp("strpcdatePicker", {
                    bindDom: this.nodes[0].querySelector("input"),
                    target: this,
                    title: "选择日期",
                    year: year,
                    month: month,
                    day: day,
                    min: min,
                    max: max
                })
            }
        },
        showDateTimePopup: function (value) {
            var year, month, day, hour, minute, min, max;
            if (value) {
                var matches = /(\d+)-(\d+)-(\d+)\s+(\d+):(\d+)/.exec(value);
                if (matches) {
                    year = parseInt(matches[1]);
                    month = parseInt(matches[2]);
                    day = parseInt(matches[3]);
                    hour = parseInt(matches[4]);
                    minute = parseInt(matches[5]);
                } else {
                    var now = new Date();
                    year = now.getFullYear();
                    month = now.getMonth() + 1;
                    day = now.getDate();
                    hour = now.getHours(),
                    minute = now.getMinutes();
                }
            } else {
                var now = new Date();
                year = now.getFullYear();
                month = now.getMonth() + 1;
                day = now.getDate();
                hour = now.getHours(),
                minute = now.getMinutes();
            }

            if (this.property.min) {
                var matches = /(\d+)-(\d+)-(\d+)\s+(\d+):(\d+)/.exec(this.property.min);
                if (matches) {
                    min = {
                        year: parseInt(matches[1]),
                        month: parseInt(matches[2]),
                        day: parseInt(matches[3]),
                        hour: parseInt(matches[4]),
                        minute: parseInt(matches[5])
                    }
                }
            }
            if (this.property.max) {
                var matches = /(\d+)-(\d+)-(\d+)\s+(\d+):(\d+)/.exec(this.property.max);
                if (matches) {
                    max = {
                        year: parseInt(matches[1]),
                        month: parseInt(matches[2]),
                        day: parseInt(matches[3]),
                        hour: parseInt(matches[4]),
                        minute: parseInt(matches[5])
                    }
                }
            }
            var page = this._getPage();
            this.domList.input.blur();
            
            if (window.innerWidth < 800) {
                page.showPopUp("strdatetimePicker", {
                    target: this,
                    title: "选择日期",
                    year: year,
                    month: month,
                    day: day,
                    hour: hour,
                    minute: minute,
                    min: min,
                    max: max
                })
            }
            else {
                if (page.popUp) return;
                page.showPopUp("strpcdatePicker", {
                    bindDom: this.nodes[0].querySelector("input"),
                    target: this,
                    title: "选择日期",
                    year: year,
                    month: month,
                    day: day,
                    hour: hour,
                    minute: minute,
                    min: min,
                    max: max
                })
            }
        },
        textFocusHandler: function (ev) {
            if (this.property.readonly) return;
            var target = ev.detail.target,
                value = target.value;
            // target.parentNode.classList.add("str-text-edit");
            // target.parentNode.classList.add("str-text-color");
            this.domList.input.setEdit(null, true);
            if (this.property.type === "date") this.showDatePopup(value);
            else this.showDateTimePopup(value);
        },
        render: function (next) {
            this.computeDate();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        computeDate: function () {
            var property = this.property;
            property.required = typeof property.required !== "undefined" ? "required" : "";
            property.name = property.name || this.uid;
            property.label = property.label || property.name;
            property.value = property.value || "";
            property.form = property.form || "";
            property.rendertype = property.rendertype || "filled";
            property.leadicon = property.leadicon || "";
            property.placeholder = property.placeholder || "";
            property.trailicon = property.trailicon || "";
            property.size = property.size || "normal";
            property.assistivetype = property.assistivetype || "";
            property.assistivetext = property.assistivetext || "";
            property.readonly = typeof property.readonly !== "undefined" ? "readonly" : "";
            property.disabled = typeof property.disabled !== "undefined" ? "disabled" : "";
            property.type = property.type || "date";
            property.min = property.min || "";
            property.max = property.max || "";
            property.class = property.class || "";
            property.hiddenbottom = typeof property.hiddenbottom !== "undefined" ? "hiddenbottom" : "";
            this.data.propertystr = this.createPropertyStr(null, ["type"]);
        },
        get hiddenbottom() {
            return this.property.hiddenbottom;
        },
        set hiddenbottom(value) {
            this.domList.input.hiddenbottom = value;
        },
        set className(value) {
            this.property.class = value;
            this.domList.input.className = value;
        },
        get className() {
            return this.property.class;
        },
        set size(value) {
            this.property.size = value;
            this.domList.input.size = value;
        },
        get size() {
            return this.property.size;
        },
        get assistivetype() {
            return this.property.assistivetype;
        },
        get assistivetext() {
            return this.property.assistivetext;
        },
        get assistive() {
            var property = this.property;
            return {
                type: property.assistivetype,
                text: property.assistivetext
            }
        },
        set assistive(obj) {
            this.property.assistivetype = obj.type;
            this.property.assistivetext = obj.text;
            this.domList.input.assistivetext = obj;
        },
        set leadicon(value) {
            this.property.leadicon = value;
            this.domList.input.leadicon = value;
        },
        get leadicon() {
            return this.property.leadicon;
        },
        set trailicon(value) {
            this.property.trailicon = value;
            this.domList.input.trailicon = value;
        },
        get trailicon() {
            return this.property.trailicon;
        },
        set max(value) {
            this.property.max = value;
        },
        get max() {
            return this.property.max;
        },
        set min(value) {
            this.property.min = value;
        },
        get min() {
            return this.property.min;
        },
        set form(value) {
            this.property.form = value;
            this.domList.input.form = value;
        },
        get form() {
            return this.property.form;
        },
        set value(value) {
            this.property.value = value;
            this.domList.input.value = value;
        },
        get value() {
            return this.property.value;
        },
        get label() {
            return this.property.label;
        },
        set label(value) {
            this.property.label = value;
            this.domList.input.label = value;
        },
        set readonly(value) {
            value = value ? "readonly" : "";
            this.property.readonly = value;
        },
        get readonly() {
            return this.property.readonly;
        },
        get disabled() {
            return this.property.disabled;
        },
        set disabled(value) {
            value = value ? "disabled" : "";
            if (this.property.disabled === value) return;
            this.property.disabled = value;
            this.domList.input.disabled = value;
        },
        set name(value) {
            if (this.property.name === value) return;
            this.property.name = value;
            this.domList.input.namem = value;
        },
        get name() {
            return this.property.name;
        },
        get required() {
            return this.property.required;
        },
        set required(value) {
            value = value ? "required" : "";
            if (value === this.property.required) return;
            this.property.required = value;
            this.domList.input.required = value;
        },
        get placeholder() {
            return this.property.placeholder;
        },
        set placeholder(value) {
            this.domList.input.placeholder = value;
            this.property.placeholder = value;
        },
        reset: function () {
            this.property.value = this.domList.input.defaultValue;
            this.domList.input.reset();
        }
    })
});